// 导入仓库 getState获取state,dispatch发送事件执行reducer改变state,subscribe监听state数据的变化
import store from '../store/index.js'
// 导入动作
import {add} from '../store/counterAction'
// 导入副作用，状态
import { useEffect,useState} from 'react';
function About() {
  // 创建value的状态，响应式更新store中num
  const [value,setValue] = useState(store.getState().counter.num);
  useEffect(()=>{
    // 监听store变化用store的num更新组件的value
    store.subscribe(()=>{
      setValue(store.getState().counter.num)    
    })
  },[])
  return ( <div>
    about
    <p>value-store里面的num：{value}</p>
    {/* add() 执行完毕返回的是一个对象 {type:INCREMENT} */}
    {/* dispatch执行后会触发counterReduder方法 */}
    <button onClick={()=>store.dispatch(add())}>+</button>
    </div> );
}

export default About;

// 01 安装 npm i react-router-dom -S
// 02 创建pages文件夹 About.js Home.js
// 03 创建router文件夹